<template>
    <el-dialog
            @open="getProd"
            :center="true"
            :show-close="false"
            :visible="show"
            @close="close"
            lock-scroll
    >
        <div slot="title">
            <div>{{officeName}}</div>
        </div>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submit">提交</el-button>
        </div>
        <div>
            <el-form label-position="left" label-width="40">
                <el-form-item
                        v-for="item in selectData"
                        :label="item.goodsName"
                        :key="item.id"
                        :rules="{
            required: true, message: '数量不能为空', trigger: 'blur'
          }"
                >
                    <el-input-number v-model="item.num" :min="0" :max="item.goodsRemain"></el-input-number>
                </el-form-item>
            </el-form>
        </div>
        <div class="conten">
            <el-table
                    @selection-change="handleSelectionChange"
                    v-loading="loading"
                    fit
                    :data="tableData"
                    style="width: 100%"
            >
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column prop="goodsName" label="物资名称"></el-table-column>
                <el-table-column prop="goodsRemain" label="可借数量"></el-table-column>
                <el-table-column prop="officeName" label="所属机构"></el-table-column>
                <el-table-column prop="remarks" label="物资用途"></el-table-column>
            </el-table>
        </div>
    </el-dialog>
</template>

<script>
    export default {
        data() {
            return {
                tableData: [],
                loading: false,
                selectData: []
            };
        },
        methods: {
            go() {
                this.$router.push("/regist");
            },
            getProd() {
                this.loading = true;
                this.$http.get(
                    "/goodsController/getAllGoods",
                    { officeId: this.officeId },
                    res => {
                        if (res.code == 0) {
                            this.tableData = res.data;
                            this.tableData.forEach(item => {
                                this.$set(item, "num", 0);
                            });
                        }
                    }
                );
                this.loading = false;
            },
            close() {
                this.tableData = [];
                this.$emit("close");
            },
            handleSelectionChange(data) {
                this.selectData = data;
            },
            submit(){
                console.log('提交');
            }
        },
        props: {
            show: {
                type: Boolean,
                default: false
            },
            officeId: {
                type: Number,
                default: 1
            },
            officeName: {
                type: String,
                default: ""
            }
        }
    };
</script>

<style lang="scss" scoped>
</style>
